<!--link rel="stylesheet" href="modules/iCarrent/pnjavascripts/DateTimePicker/development-bundle/themes/base/jquery.ui.all.css">
<script src="modules/iCarrent/pnjavascripts/DateTimePicker/development-bundle/ui/jquery.ui.core.js"></script>
<script src="modules/iCarrent/pnjavascripts/DateTimePicker/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="modules/iCarrent/pnjavascripts/DateTimePicker/development-bundle/ui/jquery.ui.datepicker.js"></script!-->




<!--  

   Date picker
   
-->
<script type="text/javascript" src="modules/iCarrent/pnjavascripts/DateTimePicker/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="modules/iCarrent/pnjavascripts/DateTimePicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="modules/iCarrent/pnjavascripts/DateTimePicker/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="modules/iCarrent/pnjavascripts/DateTimePicker/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" media="all" type="text/css" href="modules/iCarrent/pnjavascripts/DateTimePicker/jquery-ui-timepicker-addon.css">
		<script type="text/javascript">
		
		/*
			$(function(){
				$('#start_date').datetimepicker({
					numberOfMonths: 2,
					addSliderAccess: true,
					sliderAccessArgs: { touchonly: false },
          dateFormat: 'dd.mm.yy'
				});

				$('#end_date').datetimepicker({
					numberOfMonths: 2,
					addSliderAccess: true,
					sliderAccessArgs: { touchonly: false },
	        dateFormat: 'dd.mm.yy'
				});
				
			});
			*/
			
      $(function(){
        $('#start_date').datetimepicker({
					numberOfMonths: 2,
          minDate: 1,				
          dateFormat: 'dd/mm/yy',   
          hourGrid: 2,
          minuteGrid: 10,               
          onClose: function(dateText, inst) {
              var endDateTextBox = $('#end_date');
              if (endDateTextBox.val() != '') {
                  var testStartDate = new Date(dateText);
                  var testEndDate = new Date(endDateTextBox.val());
                  if (testStartDate > testEndDate)
                      endDateTextBox.val(dateText);
              }
              else {
                  endDateTextBox.val(dateText);
              }
          },
          onSelect: function (selectedDateTime){
              var start = $(this).datetimepicker('getDate');
              $('#end_date').datetimepicker('option', 'minDate', new Date(start.getTime()));
          }
        });
        
        
        
        $('#end_date').datetimepicker({
					numberOfMonths: 2,			
          dateFormat: 'dd/mm/yy',   
          hourGrid: 2,
          minuteGrid: 10,             
            onClose: function(dateText, inst) {
                var startDateTextBox = $('#start_date');
                if (startDateTextBox.val() != '') {
                    var testStartDate = new Date(startDateTextBox.val());
                    var testEndDate = new Date(dateText);
                    if (testStartDate > testEndDate)
                        startDateTextBox.val(dateText);
                }
                else {
                    startDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime){
                var end = $(this).datetimepicker('getDate');
                $('#start_date').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
            }
        });			
      });
      
		</script>
	<script>
	$(function() {
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 5000,
			step: 100,
			values: [ 500, 3000 ],
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] +" บาท");				
			}
		});
		$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 )  +" บาท");
		
	});
	</script>
	
	
	
	
	
	<!--  
	
	   Auto complete 
	   
	-->
  <link rel="stylesheet" href="modules/iCarrent/pnjavascripts/Autocomplete/themes/base/jquery.ui.all.css">	
	<script src="modules/iCarrent/pnjavascripts/Autocomplete/jquery.ui.core.js"></script>
	<script src="modules/iCarrent/pnjavascripts/Autocomplete/jquery.ui.widget.js"></script>
	<script src="modules/iCarrent/pnjavascripts/Autocomplete/jquery.ui.position.js"></script>
	<script src="modules/iCarrent/pnjavascripts/Autocomplete/jquery.ui.autocomplete.js"></script>
	<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>
<form action="index.php?module=iCarrent&type=user&func=search&ctrl=CarrentSearch" method="post">

<div class="ui-widget">
	<label>คำค้น </label>
	<input type="text" id="tags">
</div>

<div class="location1">
	<label>สถานที่รับรถ</label>
	<input type="text" name="location1"/>	
</div>
<div class="location2">
	<label>สถานที่คืนรถ</label>
	<input type="text" name="location2" />	
</div>
<div class="date-time">
	<div class="start">
		<label>วันที่จองรถ</label>
		<input type="text" id="start_date" value="">
	</div>
	<div class="end">
		<label>วันที่คืนรถ</label>
		<input type="text" id="end_date" />		
	</div>
</div>
<div class="car_size_rate">
	<div class="car_size">
		<label>ขนาดรถ</label>
		<select>
			<option>All Size</option>
			<option>Small Cars</option>
			<option>Standard Cars</option>
			<option>SUVs/Vans</option>
			<option>Specialty Cars</option>
		</select>
	</div>
	<div class="price">
		<label for="amount">ช่วงราคา</label>
		<input type="text" id="amount"/>
		<div id="slider-range"></div>
	</div>

 <!--[category_selection]-->
  
</div>
	<input type="submit" value="ค้นหา" alt="Search Now" class="button2">
</form>
